<template>
  <div class="app">
    <header class="header">
      <h1>Vue3 示例应用</h1>
      <p>欢迎使用 Vue3 + Vite 构建的现代化应用</p>
    </header>

    <main class="main">
      <!-- 计数器组件 -->
      <Counter />
      
      <!-- 待办事项组件 -->
      <TodoList />
      
      <!-- 用户信息组件 -->
      <UserInfo />
    </main>
  </div>
</template>

<script setup>
import Counter from './components/Counter.vue'
import TodoList from './components/TodoList.vue'
import UserInfo from './components/UserInfo.vue'
</script>

<style scoped>
.app {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
}

.header {
  text-align: center;
  color: white;
  margin-bottom: 40px;
}

.header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.header p {
  font-size: 1.2rem;
  opacity: 0.9;
}

.main {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
}
</style> 